<template>
  <div
    class="_rel _wrapper ai-box _over-hidden _background-0"
    v-menus:right="rMenus"
  >
    <div class="_flex-y _wrapper-y">
      <div class="_p10 _flex-item-1 _wrapper-x">
        <div class="_p-b-5">
          <tabs
            v-model="$comStore.comWin.currentTab"
            :dictList="$comStore.comWin.tabDict"
          ></tabs>
        </div>
        <component v-if="currComponent" :is="currComponent" />
        <!-- <funs v-if="$comStore.comWin.currentTab === 'fun'"></funs>
        <todo v-if="$comStore.comWin.currentTab === 'todo'"></todo>
        <div
          v-if="$comStore.comWin.currentTab === 'map'"
          class="_abs _pos-wrapper"
        >
          <ComMapBaidu />
        </div>
        <Circle v-if="$comStore.comWin.currentTab === 'circle'" />
        <Article v-if="$comStore.comWin.currentTab === 'knowledge'" /> -->
      </div>
    </div>
    <div v-if="$comStore.comWin.currentTab === 'fun'" class="_fix-rb">
      <info />
    </div>
    <template v-for="(win, _index) in $comStore.comWin.wins" :key="_index">
      <win
        :title="win.title"
        v-show="win.show"
        :content="win.code"
        :param="win.param"
        :full="win.full"
        @close="$comStore.comWin.wins.splice(_index, 1)"
        @hidden="win.show = false"
      ></win>
    </template>
    <bottom-tabs></bottom-tabs>
    <com-login />
  </div>
</template>

<script>
import win from "./components/win.vue";
import Info from "./components/info.vue";
import Funs from "./components/funs.vue";
import Todo from "./components/todo/todo.vue";
import ComMapBaidu from "@/components/com-map-baidu/com-map-baidu.vue";
import Tabs from "./components/tabs/tabs.vue";
import Circle from "./components/circle/circle.vue";
import Article from "./components/article/article.vue";
import factoryComponent from "./factory-component";
import BottomTabs from "./components/bottom-tabs.vue";
import { markRaw } from "vue";
import ComLogin from "@/views/com-login/com-login.vue";

export default {
  components: {
    win,
    Info,
    Funs,
    Todo,
    ComMapBaidu,
    Tabs,
    BottomTabs,
    Circle,
    Article,
    ComLogin,
  },
  data() {
    return {
      currComponent: undefined,
      rMenus: {
        menus: [
          {
            label: "新建资源",
            tip: "资源",
            click: () => {
              this.createLabel();
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.initComponent(this.$comStore.comWin.currentTab);
  },
  watch: {
    "$comStore.comWin.currentTab"(val) {
      this.initComponent(val);
    },
  },
  methods: {
    initComponent(val) {
      let comFun = factoryComponent[val];
      if (comFun) {
        comFun().then((cusComponent) => {
          this.currComponent = markRaw(cusComponent.default);
        });
      }
    },
    createLabel() {
      this.$comStore.comWin.openWin({
        code: "create-label",
      });
    },
  },
};
</script>

<style scoped>
.ai-box {
}

.tab-box > * {
  background: rgb(0, 0, 0, 0.2);
  padding: 5px;
  font-size: 14px;
  text-align: center;
  border-radius: 50px;
  width: 100px;
  color: #333;
}

.tab-box > *:hover {
  background: rgba(32, 126, 214, 0.4);
  font-weight: bold;
}
</style>
